﻿<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>bootstrap风格的zTree树形菜单代码</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="css/bootstrapStyle/bootstrapStyle.css" type="text/css">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck.js"></script>
<script type="text/javascript" src="js/jquery.ztree.exedit.js"></script>
<SCRIPT type="text/javascript">
	<!--
	var setting = {
		view: {
			addHoverDom: addHoverDom,
			removeHoverDom: removeHoverDom,
			selectedMulti: false
		},
		check: {
			enable: true
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		edit: {
			enable: true
		}
	};

	var zNodes =[];

	$(document).ready(function(){
	    $.post("/menu/ajaxMenu.do",{},function (result) {
            var data=result.data;
            var myNodes=new Array();
            for (var i = 0; i <data.length ; i++) {
                var a=data[i];
                var obj=new Object();//每条数据
                obj.id=a.menu_id;
                obj.name=a.menu_name;
                obj.pId=a.menu_aid;
                obj.open=true;
                myNodes.push(obj)
            }
            zNodes=myNodes;
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        })


	});

	var newCount = 1;
	function addHoverDom(treeId, treeNode) {
		var sObj = $("#" + treeNode.tId + "_span");
		if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
		var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
			+ "' title='add node' onfocus='this.blur();'></span>";
		sObj.after(addStr);
		var btn = $("#addBtn_"+treeNode.tId);
		if (btn) btn.bind("click", function(){
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
			return false;
		});
	};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.tId).unbind().remove();
	};
	//-->
</SCRIPT>
</HEAD>

<body><script src="/demos/googlegg.js"></script>
<h1>zTree - bootstrap 风格</h1>
<ul id="treeDemo" class="ztree"></ul>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</BODY>
</HTML>